<div class="doc-content">



<header class="api-profile-header" >
  <h2 class="md-display-1" >{{currentDoc.name}} API Documentation</h2>
  
  

</header>



<div layout="row" class="api-options-bar with-icon"></div>


<div class="api-profile-description">
  <p>The <code>$mdSticky</code>service provides a mixin to make elements sticky.</p>
<p>Whenever the current browser supports stickiness natively, the <code>$mdSticky</code> service will just
use the native browser stickiness.</p>
<p>By default the <code>$mdSticky</code> service compiles the cloned element, when not specified through the <code>elementClone</code>
parameter, in the same scope as the actual element lives.</p>
<p><h3>Notes</h3>
When using an element which is containing a compiled directive, which changed its DOM structure during compilation,
you should compile the clone yourself using the plain template.<br/><br/>
See the right usage below:</p>
<hljs lang="js">
  angular.module(&#39;myModule&#39;)
    .directive(&#39;stickySelect&#39;, function($mdSticky, $compile) {
      var SELECT_TEMPLATE =
        &#39;<md-select ng-model="selected">&#39; +
          &#39;<md-option>Option 1</md-option>&#39; +
        &#39;</md-select>&#39;;

      return {
        restrict: &#39;E&#39;,
        replace: true,
        template: SELECT_TEMPLATE,
        link: function(scope,element) {
          $mdSticky(scope, element, $compile(SELECT_TEMPLATE)(scope));
        }
      };
    });
</hljs>
</div>


<div>
  

  


  <section class="api-section">
    <h2 id="Usage">Usage</h2>
      <hljs lang="js">
  angular.module(&#39;myModule&#39;)
    .directive(&#39;stickyText&#39;, function($mdSticky, $compile) {
      return {
        restrict: &#39;E&#39;,
        template: &#39;<span>Sticky Text</span>&#39;,
        link: function(scope,element) {
          $mdSticky(scope, element);
        }
      };
    });
</hljs>
  </section>


  <section class="api-section">
      
      <section class="api-section">
  
</section>


      <div class="api-param-table">
  <table class="md-api-table">
  <thead>
  <tr>
    <th>Returns</th>
    <th>Description</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>
</td>
    <td class="description"><p>A <code>$mdSticky</code> function that takes three arguments:</p>
<ul>
<li><code>scope</code></li>
<li><code>element</code>: The element that will be &#39;sticky&#39;</li>
<li><code>elementClone</code>: A clone of the element, that will be shown
when the user starts scrolling past the original element.
If not provided, it will use the result of <code>element.clone()</code> and compiles it in the given scope.</li>
</ul>
</td>
  </tr>
  </tbody>
</table>
</div>

    </section>

  
  
  



  
</div>


</div>
